<template>
	<view>
		<!-- info组件 -->
		<topic-info :info="info"></topic-info>

		<view class="flex align-center p-2 border-bottom" v-for="(item,index) in hotList" :key="index">
			<i class="iconfont icon-zhidingmian text-main pr-2"></i>
			<text class="font text-ellipsis">{{item.title}}</text>
		</view>
		<divider></divider>

		<!-- tab -->
		<view class="flex align-center py-2">
			<view @click="changeTab(index)" class="flex-1 text-center"
				:class="index === tabIndex ? 'font-weight-bold text-main':'font'" v-for="(item,index) in tabList"
				:key="index">{{item.name}}</view>
		</view>

		<!-- 列表 -->
		<template v-if="listData.length > 0">
			<block v-for="(item,index) in listData" :key="index">
				<common-list :item="item" :index="index"></common-list>
				<divider></divider>
			</block>
		</template>
		<template v-else>
			<no-thing></no-thing>
		</template>
		<load-mord :moreLoad="loadtext"></load-mord>
	</view>
</template>

<script>
	import topicInfo from '@/components/topic-detail/topic-info.vue'
	import commonList from '@/components/common/common-list.vue'
	import noThing from '@/components/common/no-thing.vue'
	import loadMord from '@/components/common/load-more.vue'
	const demo = [{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: false, //关注
			title: '我是标题', //标题
			titlepic: '', //封面
			//点赞和踩
			support: {
				type: 'support', //点赞类型
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 0, //评论
			share_num: 0 //分享
		},
		{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: false, //关注
			title: '我是标题', //标题
			titlepic: '/static/logo.png', //封面
			//点赞和踩
			support: {
				type: 'unsupport', //点赞类型
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 2, //评论
			share_num: 2 //分享
		},
		{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: false, //关注
			title: '我是标题', //标题
			titlepic: '/static/logo.png', //封面
			//点赞和踩
			support: {
				type: '', //未操作
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 2, //评论
			share_num: 2 //分享
		}
	]
	export default {
		components: {
			topicInfo,
			commonList,
			noThing,
			loadMord
		},
		data() {
			return {
				loadtext:'上拉加载更多',
				tabIndex: 0, //默认选中
				tabList: [{
					name: '默认'
				}, {
					name: '最新'
				}],
				loadtext1:'',
				list1: [], //默认列表
				loadtext2:'',
				list2: [], //更新列表
				info: {
					cover: "/static/demo/topicpic/1.jpeg",
					desc: "话题描述",
					name: "话题名称",
					news_count: "10",
					today_count: "0"
				},
				hotList: [{
						title: '[新人必读]  uni-app实战第二季商城类app哈哈哈哈www'
					},
					{
						title: '[新人必读]  uni-app实战第二季商城类app哈哈哈哈www'
					}
				]
			}
		},
		computed: {
			// 当前列表数据
			listData() {
				// 如果索引等于0,则加载list1,否则加载list2
				if (this.tabIndex === 0) {
					return this.list1
				}
				return this.list2
				
			},
			// 当前上拉加载
		},
		// 接收页面传递的参数
		onLoad(e) {
			// 将字符串转化为对象
			let res = JSON.parse(e.detail)
			console.log(res)

			this.list1 = demo
		},
		// 页面滚动到底部的事件====触底事件
		onReachBottom() {
			this.loadmore()		
		},
		methods: {
			changeTab(index) {
				console.log(index)
				this.tabIndex = index
			},
			// 上垃加载更多
			loadmore(){
				// 拿到当前的列表
				let index = this.tabIndex
				// 判断是否处于可加载状态  不等于就是不处于上拉加载状态
				if(this.loadtext !== '上拉加载更多') return
				// 设置上拉加载状态处于加载中...
				this['loadtext'+(index+1)] = '加载中...'
				// 请求数据===模拟数据
				setTimeout(()=> {
					this['list'+(index+1)] = [...this['list'+(index+1)],...this['list'+(index+1)]]
					this['loadtext'+(index+1)] = '上拉加载更多...'
				},2000)
				
			}
		}
	}
</script>

<style lang="scss">

</style>
